<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AppCreater</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="App Creater"/>
    <link rel="stylesheet" href="assets_v1/css/amui.all.min.css">
    <link rel="stylesheet" href="assets_v1/css/app.css">
    <style>
        body {
            background: url('images/preback.jpg') center center fixed no-repeat;
            -moz-background-size: cover;
            -webkit-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
    以获得更好的体验！</p>
<![endif]-->

<div class="am-container">
    <form id="atrForm" action="test" method="post" enctype="multipart/form-data">


        <ul style="margin-left:10px;margin-right: 10px " class="sm-block-grid-5">
            <li>
                <button id="button_name" type="button" class="am-btn am-btn-primary am-btn-block am-disabled">名称
                </button>
            </li>
            <li>
                <button id="button_pack" type="button" class="am-btn am-btn-default am-btn-block am-disabled">包名
                </button>
            </li>
            <li>
                <button id="button_url" type="button" class="am-btn am-btn-default am-btn-block am-disabled">地址</button>
            </li>
            <li>
                <button id="button_version" type="button" class="am-btn am-btn-default am-btn-block am-disabled">版本
                </button>
            </li>
            <li>
                <button id="button_icon" type="button" class="am-btn am-btn-default am-btn-block am-disabled">图标
                </button>
            </li>
        </ul>

        <div class="am-tabs" data-am-tabs style="margin-top: 40px">
            <div class="am-tabs-bd" style="border-width: medium 0px 0px">
                <div class="am-tab-panel am-fade am-in am-active" id="tab1">
                    <h1 class="am-center am-text-center">打造一个属于自己的APP应当从</h1>

                    <div id="div_app_name" class="am-form-group am-form-icon am-form-feedback am-margin-top-xl">
                        <input id="app_name" name="app_name" class="am-form-field " type="text" placeholder="一个钟意的名字">
                    </div>
                    <p>
                        <button id="button_to_tab2" type="button"
                                class="am-btn am-padding-horizontal-xl am-btn-lg am-btn-primary am-center">开始
                        </button>

                    </p>
                </div>
                <div class="am-tab-panel am-fade" id="tab2">
                    <h1 class="am-center am-text-center">为了与其他APP区分开来需要</h1>

                    <div id="div_app_package" class="am-form-group am-form-icon am-form-feedback am-margin-top-xl">
                        <input id="app_package" name="app_package" class="am-form-field" type="text"
                               placeholder="一个独特的包名">
                    </div>
                    <p>
                        <button id="button_to_tab3" type="button"
                                class="am-btn am-padding-horizontal-xl am-btn-lg am-btn-primary am-center">然后
                        </button>
                    </p>
                </div>
                <div class="am-tab-panel am-fade" id="tab3">
                    <h1 class="am-center am-text-center">别忘了给APP设置用来显示内容的</h1>

                    <div id="div_app_url" class="am-form-group am-form-icon am-form-feedback am-margin-top-xl">
                        <input id="app_url" name="app_url" class="am-form-field" type="text" placeholder="一个好记的地址">
                    </div>
                    <p>
                        <button id="button_to_tab4" type="button"
                                class="am-btn am-padding-horizontal-xl am-btn-lg am-btn-primary am-center">接下来
                        </button>
                    </p>
                </div>
                <div class="am-tab-panel am-fade" id="tab4">
                    <h1 class="am-center am-text-center">当然少不了</h1>

                    <div id="div_app_version" class="am-form-group am-form-icon am-form-feedback am-margin-top-xl">
                        <input id="app_version" name="app_version" class="am-form-field" type="text"
                               placeholder="一个有意义的版本号">
                    </div>
                    <p>
                        <button id="button_to_tab5" type="button"
                                class="am-btn am-padding-horizontal-xl am-btn-lg am-btn-primary am-center">最后剩下
                        </button>
                    </p>
                </div>
                <div class="am-tab-panel am-fade am-margin-top-xl" id="tab5">

                    <h1 class="am-center am-text-center">能够第一眼就能被记住的</h1>

                    <div class="am-panel">
                        <p class="am-form-help">一张个性的图片</p>
                        <input id="app_icon" name="app_icon" type="file" accept="image/png">
                    </div>
                    <p>
                        <button id="submitButton" type="button"
                                class="am-btn am-padding-horizontal-xl am-btn-lg am-btn-success am-center">开始创建
                        </button>
                    </p>

                </div>
            </div>
        </div>
    </form>
</div>
<script src="assets_v1/js/zepto.min.js"></script>
<script src="assets_v1/js/amui.js"></script>
<script src="assets_v1/js/app.js"></script>
<script>

    var appFunction = {
        tabs: ['#tab1', '#tab2', '#tab3', '#tab4', '#tab5'],
        buttons_to_nav: ['#button_name', '#button_pack', '#button_url', '#button_version', '#button_icon'],
        buttons_to_tab: ['#button_to_tab2', '#button_to_tab3', '#button_to_tab4', '#button_to_tab5'],
        textEditors: ['#app_name', '#app_package', '#app_url', '#app_version', '#app_icon'],
        textDivs: ['#div_app_name', '#div_app_package', '#div_app_url', '#div_app_version', ''],

        buttonOnClick: function (index) {
            var textEditor = $(this.textEditors[index]);
            var textDiv = $(this.textDivs[index]);
            var text = textEditor.attr('value');
            if (text.length > 0) {
                textDiv.removeClass("am-form-error");
                cssExr.setCurrentTab($(this.tabs[index]), $(this.tabs[index + 1]));
                cssExr.changeButtonToBlue($(this.buttons_to_nav[index + 1]));
            } else {
                textEditor.addClass("am-animation-shake").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
                    $(this).removeClass("am-animation-shake");
                });
                textDiv.addClass("am-form-error");
            }
        }
    };

    $('#submitButton').click(function () {
        var $btn = $(this)
        $btn.button('loading');
//        $('#atrForm').submit();
        var data = new FormData();
        var appName = $('#app_name').attr('value');
        var appUrl = $('#app_url').attr('value');
        var appVersion = $('#app_version').attr('value');
        var appPackage = $('#app_package').attr('value');
        var appIcons = $('#app_icon');
        for (var i = 0, file; file = appIcons[i]; i++) {
            data.append(file.name, file);
        }
        data.append("app_name", appName);
        data.append("app_url", appUrl);
        data.append("app_version", appVersion);
        data.append("app_package", appPackage);

        $.ajax({
            type: 'GET',
            url: 'createApp',
            data: data,
            success: function () {
                alert('haha');
            }
        });
        $btn.button('reset');
    });


    $("#button_to_tab2").click(function () {
        appFunction.buttonOnClick(0);
    });
    $("#button_to_tab3").click(function () {
        appFunction.buttonOnClick(1);
    });
    $("#button_to_tab4").click(function () {
        appFunction.buttonOnClick(2);
    });
    $("#button_to_tab5").click(function () {
        appFunction.buttonOnClick(3);
    });


    $('#button_name').click(function () {
        $('#tab1').addClass("am-in am-active");
    });
    $('#button_pack').click(function () {
        $('#tab2').addClass("am-in am-active");
    });
    $('#button_url').click(function () {
        $('#tab3').addClass("am-in am-active");
    });
    $('#button_version').click(function () {
        $('#tab4').addClass("am-in am-active");
    });
    $('#button_icon').click(function () {
        $('#tab5').addClass("am-in am-active");
    });


    var cssExr = {
        setCurrentTab: function (preTab, currentTab) {
            preTab.removeClass("am-in am-active");
            currentTab.addClass("am-in am-active");
        },
        changeButtonToBlue: function (button) {
            button.removeClass("am-btn-default");
            button.addClass("am-btn-primary");
        },
        chageButtonToDray: function (button) {
            button.removeClass("am-btn-primary");
            button.addClass("am-btn-default");
        }
    }


</script>
</body>
</html>
